<template>
  <div class="app-container" style="padding:1vh 4vw">
    <div class="filter-container" style="margin: 1vh 2vw;">
      <el-form v-show="device() !== 'mobile'" ref="form" class="form-container" :model="form" :label-position="labelPosition()" :size="handleSize()">
        <el-form-item label="活动时间" label-width="80px" prop="activityTime" style="margin-bottom: 3vh">
          <el-date-picker
            v-model="activityTime"
            type="daterange"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :size="handleSize()"
          />
        </el-form-item>

        <el-form-item  label="活动状态" label-width="80px" prop="status" style="margin-bottom: 3vh">
          <el-radio-group v-model="status" :size="handleSize()" @change="handleStatus">
            <el-radio-button v-for="status in statusOptions" :key="status.value" :label="status.value" :size="handleSize()">{{ status.label }}</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="活动类型" label-width="80px" style="margin-bottom: 3vh">
          <el-radio-group v-model="type" :size="handleSize()" @change="handleType">
            <el-radio-button v-for="type in typeOptions" :key="type" :label="type" :size="handleSize()"/>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <form class="form" style="width: 100%" >
            <label for="search">
              <input v-model="query" required="" autocomplete="off" placeholder="请输入关键词" id="search" type="text" @blur="handleSearch()" @keyup.enter= "handleSearch()">
              <div class="icon">
                <svg stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="swap-on">
                  <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linejoin="round" stroke-linecap="round"></path>
                </svg>
                <svg stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="swap-off">
                  <path d="M10 19l-7-7m0 0l7-7m-7 7h18" stroke-linejoin="round" stroke-linecap="round"></path>
                </svg>
              </div>
              <button type="reset" class="close-btn">
                <svg viewBox="0 0 20 20" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg">
                  <path clip-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" fill-rule="evenodd"></path>
                </svg>
              </button>
            </label>
          </form>
        </el-col>
      </el-row>
    </div>

    <div class="tab-container" style="margin: 2vh 2vw;">
      <el-table :data="activitiesList" highlight-current-row style="width: 100%" :size="handleSize()" tooltip-effect="light">
<!--        <el-table-column prop="id" label="ID" fixed sortable style="width: 20vw"/>-->
        <el-table-column prop="title" label="标题" show-overflow-tooltip min-width="150" max-width="400"/>
        <el-table-column prop="number" label="发布者"  sortable min-width="100" max-width="200" align="center">
          <template v-slot="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name}}</p>
              <p>学号: {{ scope.row.adminNumber }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="zone" label="活动地点" min-width="100" max-width="200"/>
        <el-table-column prop="type" label="活动类型" min-width="100" max-width="200"/>
        <el-table-column prop="status" label="活动状态" min-width="100" max-width="200" align="center">
          <template v-slot="scope">
            <el-tag :type="scope.row.status | typeFilter">{{ scope.row.status | statusFilter}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="360">
          <template v-slot="scope">
            <el-button v-show="device() !== 'mobile'" size="mini" type="success" @click="handleSelect(scope.row)" icon="el-icon-view">
              查看
            </el-button>
            <el-button v-show="device() !== 'mobile'" size="mini" type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit">
              编辑
            </el-button>
            <el-button v-show="device() !== 'mobile'" size="mini" type="" @click="handleRecord(scope.row)" icon="el-icon-s-order">
              记录
            </el-button>
            <el-button v-show="device() !== 'mobile'" size="mini" type="warning" @click="handleQRcode(scope.row)">
              <svg-icon icon-class="QRcode"/>
              <span style="margin-left: 5px">签到</span>
            </el-button>
            <el-button v-show="device() === 'mobile'" size="mini" type="success" @click="handleSelect(scope.row)" icon="el-icon-view" circle/>
            <el-button v-show="device() === 'mobile'" size="mini" type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit" circle/>
            <el-button v-show="device() === 'mobile'" size="mini" type="" @click="handleRecord(scope.row)" icon="el-icon-s-order" circle/><!--            <el-button size="mini" type="danger" @click="handleDelete(scope)" icon="el-icon-delete">-->
            <el-button v-show="device() === 'mobile'" size="mini" type="warning" @click="handleQRcode(scope.row)" circle>
              <svg-icon icon-class="QRcode"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row style="display: flex;justify-content: center;margin-top: 5vh">
        <el-col :xs="18" :sm="12" :md="12" :lg="8" :xl="6" style="display: flex;justify-content: center">
          <el-pagination
            v-show="total>0"
            background
            hide-on-single-page
            :current-page.sync="currentPage"
            :page-size="perPage"
            :pager-count="5"
            layout="prev, pager, next"
            @prev-click="change"
            @next-click="change"
            @current-change="change"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>

    <el-dialog :visible.sync="dialogFormVisible" :fullscreen="dialogFormFullscreen" :show-close="false">
      <span slot="title" @click="fullscreen">
        <div style="display:flex;justify-content: space-between;font-size: 1.2rem;font-family: 微软雅黑,serif">
          签到
          <i :class="[halfHide?'el-icon-minus':'el-icon-full-screen']" @click="changeIcon"/>
        </div>
      </span>
      <div style="display: flex;justify-content: center;margin-top: 8vh;margin-bottom: 10vh">
        <div class="card-qrcode">
          <svg style="width: 100%;height: 100%" shape-rendering="crispEdges" viewBox="0 -0.5 29 29" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0h7M8 0h2M14 0h1M16 0h5M22 0h7M0 1h1M6 1h1M13 1h1M17 1h2M22 1h1M28 1h1M0 2h1M2 2h3M6 2h1M8 2h1M11 2h4M18 2h1M20 2h1M22 2h1M24 2h3M28 2h1M0 3h1M2 3h3M6 3h1M8 3h2M11 3h1M13 3h1M15 3h5M22 3h1M24 3h3M28 3h1M0 4h1M2 4h3M6 4h1M8 4h4M13 4h1M15 4h1M19 4h1M22 4h1M24 4h3M28 4h1M0 5h1M6 5h1M9 5h1M12 5h2M17 5h4M22 5h1M28 5h1M0 6h7M8 6h1M10 6h1M12 6h1M14 6h1M16 6h1M18 6h1M20 6h1M22 6h7M9 7h1M11 7h1M15 7h6M0 8h4M6 8h1M8 8h1M13 8h2M17 8h3M21 8h1M24 8h3M28 8h1M2 9h1M4 9h2M7 9h1M9 9h1M14 9h1M16 9h1M19 9h2M22 9h3M28 9h1M0 10h5M6 10h1M8 10h1M13 10h1M16 10h1M18 10h1M20 10h1M22 10h3M26 10h2M1 11h1M3 11h2M7 11h1M11 11h4M16 11h1M18 11h1M20 11h5M28 11h1M1 12h3M5 12h2M9 12h1M11 12h1M13 12h5M19 12h1M25 12h2M0 13h2M3 13h3M8 13h1M10 13h2M14 13h1M16 13h2M19 13h2M22 13h2M26 13h3M0 14h1M2 14h1M4 14h3M9 14h2M12 14h1M14 14h1M16 14h1M19 14h3M23 14h2M26 14h3M0 15h2M3 15h2M8 15h1M12 15h1M14 15h3M20 15h1M22 15h3M27 15h1M0 16h1M2 16h3M6 16h1M10 16h2M18 16h1M20 16h2M24 16h2M27 16h1M1 17h2M4 17h1M7 17h3M12 17h1M14 17h2M18 17h1M20 17h2M23 17h1M25 17h3M0 18h1M3 18h1M6 18h1M8 18h5M15 18h2M23 18h1M26 18h1M2 19h4M12 19h1M14 19h1M16 19h2M19 19h3M26 19h1M1 20h1M3 20h1M6 20h7M14 20h2M17 20h10M8 21h3M12 21h1M18 21h1M20 21h1M24 21h5M0 22h7M9 22h6M19 22h2M22 22h1M24 22h2M27 22h1M0 23h1M6 23h1M9 23h1M13 23h3M18 23h1M20 23h1M24 23h2M27 23h1M0 24h1M2 24h3M6 24h1M10 24h1M12 24h1M14 24h4M20 24h5M26 24h3M0 25h1M2 25h3M6 25h1M8 25h1M11 25h2M15 25h2M19 25h3M24 25h2M28 25h1M0 26h1M2 26h3M6 26h1M8 26h1M10 26h2M13 26h1M21 26h1M23 26h1M26 26h1M28 26h1M0 27h1M6 27h1M8 27h1M11 27h1M14 27h1M16 27h1M18 27h3M23 27h1M25 27h1M27 27h1M0 28h7M8 28h1M14 28h3M19 28h2M25 28h1M27 28h1" stroke="#000000"></path>
          </svg>
          <div class="prompt-id567">
            <div class="token-container">
              <svg viewBox="0 0 24 24" fill="none" class="creator-points" xmlns="http://www.w3.org/2000/svg"><path d="M19.4133 4.89862L14.5863 2.17544C12.9911 1.27485 11.0089 1.27485 9.41368 2.17544L4.58674 4.89862C2.99153 5.7992 2 7.47596 2 9.2763V14.7235C2 16.5238 2.99153 18.2014 4.58674 19.1012L9.41368 21.8252C10.2079 22.2734 11.105 22.5 12.0046 22.5C12.6952 22.5 13.3874 22.3657 14.0349 22.0954C14.2204 22.018 14.4059 21.9273 14.5872 21.8252L19.4141 19.1012C19.9765 18.7831 20.4655 18.3728 20.8651 17.8825C21.597 16.9894 22 15.8671 22 14.7243V9.27713C22 7.47678 21.0085 5.7992 19.4133 4.89862ZM4.10784 14.7235V9.2763C4.10784 8.20928 4.6955 7.21559 5.64066 6.68166L10.4676 3.95848C10.9398 3.69152 11.4701 3.55804 11.9996 3.55804C12.5291 3.55804 13.0594 3.69152 13.5324 3.95848L18.3593 6.68166C19.3045 7.21476 19.8922 8.20928 19.8922 9.2763V9.75997C19.1426 9.60836 18.377 9.53091 17.6022 9.53091C14.7929 9.53091 12.1041 10.5501 10.0309 12.3999C8.36735 13.8847 7.21142 15.8012 6.68783 17.9081L5.63981 17.3165C4.69466 16.7834 4.10699 15.7897 4.10699 14.7235H4.10784ZM10.4676 20.0413L8.60933 18.9924C8.94996 17.0479 9.94402 15.2665 11.4515 13.921C13.1353 12.4181 15.3198 11.5908 17.6022 11.5908C18.3804 11.5908 19.1477 11.6864 19.8922 11.8742V14.7235C19.8922 15.2278 19.7589 15.7254 19.5119 16.1662C18.7615 15.3596 17.6806 14.8528 16.4783 14.8528C14.2136 14.8528 12.3781 16.6466 12.3781 18.8598C12.3781 19.3937 12.4861 19.9021 12.68 20.3676C11.9347 20.5316 11.1396 20.4203 10.4684 20.0413H10.4676Z" fill="currentColor"></path></svg>
            </div>
            <div class="blurry-splash"></div>
            <p>Hover For Free*<br><span class="bold-567">Creator Points</span> </p>
            <p class="really-small-text">*at the expense of your sanity</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import form from 'element-ui/packages/form'
import {indexActivities} from "@/api/admin/activity";
import {indexUser} from "@/api/admin/user";
import { indexAdmin, itemAdmin } from '@/api/admin/admin'
import { indexRole } from '@/api/admin/role'
import { itemActivity } from '@/api/user/activity'

const typeOptions = ['政治学习', '志愿服务', '社会实践', '讲座学习', '校园文化', '就业讲座', '文艺活动', '学科竞赛', '服务性劳动']
const statusOptions = [
  {label:'全部', value: null},
  {label:'报名中', value: 4},
  {label:'进行中', value: 5},
  {label:'已结束', value: 6}]
const defaultForm = {
  id: undefined,
  createdAt: undefined,
  updatedAt: undefined,
  deletedAt: undefined,
  number: '',
  title: '',
  zone: '',
  type: '',
  activityStart: '',
  activityEnd: '',
  enrollStart: '',
  enrollEnd: '',
  count: undefined,
  college: ['管理学院', '经济学院', '珠宝学院', '建筑学院', '外国语学院', '国际商学院', '电气工程学院', '土木工程学院',
    '汽车与交通工程学院', '计算机工程学院暨大数据学院', '机械工程学院暨机器人工程学院', '电子信息学院暨中兴通讯工程学院'],
  firstImage: '',
  content: '',
  status: 0,
  isOpen: 0
}

export default {
  filters: {
    // 状态显示转换
    statusFilter(status) {
      const statusMap = {
        0: '已提交',
        1: '审核中',
        2: '退回中',
        3: '审核通过',
        4: '报名中',
        5: '进行中',
        6: '已结束'
      }
      return statusMap[status]
    },
    // 类型显示转换
    typeFilter(type) {
      const typeMap = {
        0: 'info',
        1: 'warning',
        2: 'danger',
        3: 'success',
        4: '',
        5: 'success',
        6: 'info'
      }
      return typeMap[type]
    },
    isOpenFilter(isOpen) {
      const isOpenMap = {
        0: '禁用',
        1: '启用',
      }
      return isOpenMap[isOpen]
    }
  },
  data() {
    return {
      statusOptions,
      typeOptions,
      currentPage: 1,
      lastPage: 0,
      total: 0,
      perPage: 12,
      activityTime: [],
      status: undefined,
      type: undefined,
      query: '',
      temp: Object.assign({}, defaultForm),
      activitiesList: [],
      dialogFormVisible: false,
      dialogFormFullscreen: false,
      halfHide: false
    }
  },
  computed: {
    form() {
      return form
    }
  },
  created() {
    // 从服务器端获取 活动列表
    this.currentPage = 1;
    this.getActivities()
  },
  methods: {
    // 获取活动列表
    async getActivities() {
      const res = await indexActivities({page:this.currentPage})
      let activitiesList = res.data.data
      for (const activitiesListKey in activitiesList) {
        const resAdmin = await itemAdmin({id: activitiesList[activitiesListKey].number})
        activitiesList[activitiesListKey]['name'] = resAdmin.data.name
        activitiesList[activitiesListKey]['adminNumber'] = resAdmin.data.number
      }
      this.activitiesList = activitiesList
      this.currentPage = res.data.currentPage
      this.lastPage = res.data.lastPage
      this.total = res.data.total
      this.perPage = res.data.perPage
    },
    // 控制状态单选框
    async handleStatus(val) {
      const res = await indexActivities({page: this.currentPage, status: val, type: this.type})
      let activitiesList = res.data.data
      for (const activitiesListKey in activitiesList) {
        const resAdmin = await itemAdmin({id: activitiesList[activitiesListKey].number})
        activitiesList[activitiesListKey]['name'] = resAdmin.data.name
        activitiesList[activitiesListKey]['adminNumber'] = resAdmin.data.number
      }
      this.activitiesList = activitiesList
    },
    // 控制类型单选框
    async handleType(val) {
      const res = await indexActivities({page: this.currentPage, type: val, status: this.status})
      let activitiesList = res.data.data
      for (const activitiesListKey in activitiesList) {
        const resAdmin = await itemAdmin({id: activitiesList[activitiesListKey].number})
        activitiesList[activitiesListKey]['name'] = resAdmin.data.name
        activitiesList[activitiesListKey]['adminNumber'] = resAdmin.data.number
      }
      this.activitiesList = activitiesList
    },
    // 搜索
    async handleSearch() {
      if (this.query !== '') {
        const res = await indexActivities({ page: this.currentPage, title: this.query })
        let activitiesList = res.data.data
        for (const activitiesListKey in activitiesList) {
          const resAdmin = await itemAdmin({ id: activitiesList[activitiesListKey].number })
          activitiesList[activitiesListKey]['name'] = resAdmin.data.name
          activitiesList[activitiesListKey]['adminNumber'] = resAdmin.data.number
        }
        this.activitiesList = activitiesList
        this.currentPage = res.data.currentPage
        this.lastPage = res.data.lastPage
        this.total = res.data.total
        this.perPage = res.data.perPage
      } else{
        this.getActivities()
      }
    },
    // 查看
    handleSelect(row) {
      this.$router.push({
        path: '/activity/detail',
        query: {
          id: row.id
        }})
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({
        path: '/activity/edit',
        query: {
          id: row.id
        }}
      )
    },
    // 活动记录
    handleRecord(row) {
      this.$router.push({
        path: '/activity/user',
        query: {
          id: row.id
        }}
      )
    },
    handleQRcode(row) {
      //签到逻辑
      this.dialogFormVisible = true
    },
    // 获取当前 设备类型
    device() {
      return this.$store.state.app.device
    },
    // 根据当前设备控制 label位置
    labelPosition() {
      return this.$store.state.app.device === 'mobile' ? 'top' : 'left'
    },
    // 根据当前设备控制 尺寸
    handleSize() {
      return this.$store.state.app.device === 'mobile' ? 'mini' : 'medium'
    },
    // 分页
    change(e) {
      this.currentPage = e;
      this.getActivities();
    },
    // 切换图标
    changeIcon() {
      this.halfHide = !this.halfHide
    },
    // 切换全屏
    fullscreen() {
      // 全屏切换
      this.dialogFormFullscreen = !this.dialogFormFullscreen

      // 不同屏幕下宽高不同
      let dv = document.getElementById('card-qrcode');
      if (this.dialogFormFullscreen) {
        dv.style.width = '40vh'
        dv.style.height = '40vh'
      } else {
        dv.style.width = '190px'
        dv.style.height = '190px'
      }
    }
  }
}
</script>

<!--lang="scss"-->
<style scoped>
.app-container{
  //margin-top: 30px;
  //margin-left: 2rem;
  //margin-right: 2rem;
  //border-radius: 15px;
  //box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

  .filter-container {
    //margin-right: 30px;
    //margin-left: 30px;
    //margin-top: 30px;
  }

  .tab-container {
    //margin-right: 30px;
    //margin-left: 30px;
    //margin-top: 30px;
  }

  .el-form {
    margin-top: 5vh;
  }

  .el-form-item__label {
    font-size: 16px;
    font-weight: 530;
    font-family: "微软雅黑",serif;
    letter-spacing: 1px;
  }
}

/* this button is inspired by -- whatsapp input */
/* == type to see fully interactive and click the close button to remove the text  == */

.form {
  --primary-100:#0077C2;
  --primary-200:#59a5f5;
  --primary-300:#c8ffff;
  --accent-100:#00BFFF;
  --accent-200:#00619a;
  --text-100:#333333;
  --text-200:#5c5c5c;
  --bg-100:#FFFFFF;
  --bg-200:#f5f5f5;
  --bg-300:#cccccc;
  /*  background of input */
  box-shadow: 0 1px 4px rgb(204, 204, 204);
  --padding: 1.5em;
  --rotate: 80deg;
  /*  rotation degree of input*/
  --gap: 2em;
  /*  gap of items in input */
  --icon-change-color: #15A986;
  /*  when rotating changed icon color */
  --height: 40px;
  /*  height */
  width: 200px;
  padding-inline-end: 1em;
  /*  change this for padding in the end of input */
  //background: var(--input-bg);
  border: var(--accent-200);
  position: relative;
  border-radius: 4px;
}

.form label {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--height);
}

.form input {
  width: 100%;
  padding-inline-start: calc(var(--padding) + var(--gap));
  outline: none;
  background: none;
  border: 0;
}
/* style for both icons -- search,close */
.form svg {
  /* display: block; */
  color: #111;
  transition: 0.3s cubic-bezier(.4,0,.2,1);
  position: absolute;
  height: 15px;
}
/* search icon */
.icon {
  position: absolute;
  left: var(--padding);
  transition: 0.3s cubic-bezier(.4,0,.2,1);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* arrow-icon*/
.swap-off {
  transform: rotate(-80deg);
  opacity: 0;
  visibility: hidden;
}
/* close button */
.close-btn {
  /* removing default bg of button */
  background: none;
  border: none;
  right: calc(var(--padding) - var(--gap));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  padding: 0.1em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: 0.3s;
  opacity: 0;
  transform: scale(0);
  visibility: hidden;
}

.form input:focus ~ .icon {
  transform: rotate(var(--rotate)) scale(1.3);
}

.form input:focus ~ .icon .swap-off {
  opacity: 1;
  transform: rotate(-80deg);
  visibility: visible;
  color: var(--icon-change-color);
}

.form input:focus ~ .icon .swap-on {
  opacity: 0;
  visibility: visible;
}

.form input:valid ~ .icon {
  transform: scale(1.3) rotate(var(--rotate))
}

.form input:valid ~ .icon .swap-off {
  opacity: 1;
  visibility: visible;
  color: var(--icon-change-color);
}

.form input:valid ~ .icon .swap-on {
  opacity: 0;
  visibility: visible;
}

.form input:valid ~ .close-btn {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: 0s;
}

.form:hover {
  border-color: #419fff;
  box-shadow: 0 0 3px 2px #419fff;
}

.card-qrcode {
  width: 40vh;
  height: 40vh;
  background: rgb(22, 22, 22);
  color: white;
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms ease;
  animation: 8s thumb-thumb infinite;
}

.card-qrcode svg path {
  transition: 300ms ease;
  opacity: 0;
}

.bold-567 {
  font-weight: bold;
}

.creator-points {
  width: 3.25rem;
  height: 3rem;
  color: rgb(167 139 250);
  /* w-5 h-5 mr-2 text-indigo-400 */
}

.blurry-splash {
  position: absolute;
  inset: 0;
  width: 60px;
  margin: 0 auto;
  height: 60px;
  border-radius: 1rem;
  z-index: -1;
  opacity: 70%;
  filter: blur(15px);
  background: linear-gradient(
    120deg, rgba(167, 139, 250, 0.24)
    , rgba(167, 139, 250, 0.384), rgba(167, 139, 250, 0.226));
}

.prompt-id567 {
  position: absolute;
  color: rgb(173, 173, 173);
  text-align: center;
}

.really-small-text {
  text-align: center;
  width: 100%;
  position: absolute;
  font-size: 8px;
  margin-top: 28px;
  opacity: 0.5;
}

.card-qrcode:hover {
  cursor: none;
  background-color: white;
}

.card-qrcode:hover .prompt-id567 {
  transition: 300ms ease;
  opacity: 0;
}

.token-container {
  animation: 2s spinny-token-yayyy infinite;
  margin-bottom: 10px;
}

.prompt-id567 svg path {
  stroke: none;
  opacity: 1;
}

.card-qrcode:hover svg path {
  opacity: 1;
}

@keyframes spinny-token-yayyy {
  0% {
    transform: perspective(200px) rotateY(0deg);
  }

  100% {
    transform: perspective(200px) rotateY(360deg);
  }
}

@keyframes thumb-thumb {
  0%, 10%, 100% {
    transform: scale(100%);
  }

  5% {
    transform: scale(103%);
  }

  7% {
    transform: scale(97%);
  }
}
</style>
